<template>
	<view>
		<view class="nav-back">
			<top-heigth backTitle="服务项目"></top-heigth>
		</view>
		<view class="content-box m-t24">
		<view class="public-box m-b16">
			<!-- <view class="detail-title">
				<view class="title-box">
					<view class="line orange-back"></view>
					<h1 class="title-h1">可服务项目</h1>
				</view>
				<view class="title-more" @click="goComment(detail.id)">
					<view class=""> 评论</view>
					<uv-icon size="16" name="/static/image/more.png" style="margin-right: 8rpx;"></uv-icon>
				</view>
			</view>	 -->
			<view class="goods-box">
				<view v-for="item in list" class="goods" @click="goGoodsDetail(item.id)">
					<view class="img-box">
						<image class="img" :src="item.serviceImage" mode="widthFix"></image>
					</view>
					<view class="goods-font">       
						<h1 class="goods-h1">{{item.serviceName}}</h1>
						<view class="font-bottom">
							<view class="font-bottom-l">
								<view class="red">
									<span class="goods-span-red">¥</span>{{item.serviceAmount}}
								</view>
								<view class="button_xz">
								<view @click.stop="backToOrder(item)" class="but-blue t-but">选择</view>
								</view>
							</view>
						
						</view>
					</view>
				</view>
				
			</view>
		</view>
	
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	export default {
		data() {
			return {
				detail: null,
				list:[],
				id:'',
				isparent: null,
				userInfo:uni.getStorageSync('userInfo'),
				location: uni.getStorageSync('location'),
				bannerList: [],
				videoUrl: null
			}
		},
		components: { TopHeigth },
		onLoad(e) {
			this.id = e.id
			this.listBox()
		},
		methods: {
			listBox(){
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
					id:this.id,
					lat: this.location ? this.location.latitude : null,
					lng: this.location ? this.location.longitude : null,
				}).then((res) => {
					this.detail = res.data
					this.list = res.data.tAppServiceVos
					
					if(this.detail.staffVideo){
						var lists = JSON.parse(this.detail.staffVideo)
						for(var i in lists){
							this.videoUrl = lists[i].url
						}
					}					
					if(this.detail.staffBanner){
						var lists = JSON.parse(this.detail.staffBanner)
						for(var i in lists){
							this.bannerList.push({
								url: lists[i].url,
								hasVideo: this.videoUrl ? 1 : 0,
							})
						}
						
					}
					
			
					console.log('this.bannerList', this.bannerList)
				})
			},
			backToOrder(serviceInfo){
				uni.$emit('selectService', serviceInfo)
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/common/css/public.scss";
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	
	.person-head {
		position: relative;
	}
	.button_xz{
		
	}
	.login-but{
		width: 100%;
		height: 96rpx;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 96rpx;
		color:#fff;
		text-align: center;
		background: #27A0FF;
		border-radius:48rpx;
		margin-top: 50rpx;
	}	
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.people-img{
		width: 100%;
		/* height:740rpx; */
		background: #f5f5f5;
		text-align: center;
		overflow: hidden;
		@include flex;
		align-items: center;
		image{
			width: 100%;
			/* height:740rpx; */
		}
	}
	
	.list-box{
		position: relative;
		border-radius:24rpx;
		padding: 32rpx 24rpx;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 24rpx;
		background-color: #fff;
	}
	
	.list-center{
		/* width: calc(100% - 344rpx); */
		margin-right: 24rpx;
		h1{
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 8rpx;
		}
		.time{
			display: flex;
			justify-content: flex-start;
			font-size: 22rpx;
			margin-bottom: 8rpx;
			.time-b-red{
				height: 34rpx;
				line-height: 34rpx;
				color: #fff;
				background: #FF1818;
				border-radius: 4rpx;
				border: 2rpx solid #FF1818;
				z-index: 9;
				padding: 0 8rpx;
			}
			.time-f-red{
				height: 34rpx;
				line-height: 34rpx;
				color: #FF1818;
				background: rgba(255,0,0,0.08);
				border: 2rpx solid rgba(255,24,24,0.3);
				border-left: 0;
				border-radius: 0 4rpx 4rpx 0;
				margin-left: -2rpx;
				padding: 0 8rpx;
			}
		}
		
		
	}
	.list-bottom-box{
		display: flex;
		justify-content: space-between;
	}
	.list-bottom{
		width: calc(100% - 200rpx);
		.font{
			color: #999999;
			font-size: 24rpx;
			span{
				color:#FFA23E;
				margin-right: 8rpx;
				font-weight: bold;
			}
		}
		.font-flex{
			display: flex;
			justify-content: flex-start;
			.shop{
				width: calc(100% - 150rpx);
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
	.font{
		color: #999999;
		font-size: 24rpx;
		span{
			color:#FFA23E;
			margin-right: 8rpx;
			font-weight: bold;
		}
	}
	.list-center-top{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	
	.icon-font{
		display: flex;
		justify-content: flex-end;
		color: #999999;
		font-size: 24rpx;
	}
	.t-but{
		width: 160rpx;
		border-radius: 48rpx;
		font-size: 22rpx;
		text-align: center;
		height: 48rpx;
		line-height: 48rpx;
		margin-top: 24rpx;
	}
	
	
	
	.detail-font{
		font-size: 26rpx;
		color: #666;
		line-height: 40rpx;
		span{
			margin-right: 30rpx;
		}
	}
	
	/* --------------- */
	
</style>
